<template>
  <view class="container">
    <!-- 顶部筛选栏 -->
    <view class="filter-bar">
      <text :class="['filter-item', activeFilter === 'all' ? 'active' : '']" @click="changeFilter('all')">全部</text>
      <text :class="['filter-item', activeFilter === 'new' ? 'active' : '']" @click="changeFilter('new')">新招呼</text>
      <text :class="['filter-item', activeFilter === 'chat' ? 'active' : '']" @click="changeFilter('chat')">仅沟通</text>
    </view>

    <!-- 通知列表 -->
    <view class="notification-list">
      <view class="notification-item" v-for="(item, index) in filteredNotifications" :key="index" @click="handleNotificationClick(item)">
        <view class="notification-header">
          <text class="notification-title">{{ item.title }}</text>
          <text class="notification-time">{{ item.time }}</text>
        </view>
        <text class="notification-content">{{ item.content }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeFilter: 'all', // 当前选中的筛选条件
      notifications: [
        {
          type: 'system',
          title: '系统通知',
          time: '10:00',
          content: '系统所有动态通知'
        },
        {
          type: 'view',
          title: '李某某 查看了我',
          time: '10:00',
          content: '10位牛人查看'
        },
        {
          type: 'chat',
          title: '李某某 网页设计',
          time: '10:00',
          content: 'BOSS您好，我仔细阅读了您发布的的这个职位...'
        },
        {
          type: 'chat',
          title: '李某某 网页设计',
          time: '10:00',
          content: 'BOSS您好，我仔细阅读了您发布的的这个职位...'
        },
        {
          type: 'chat',
          title: '李某某 网页设计',
          time: '10:00',
          content: 'BOSS您好，我仔细阅读了您发布的的这个职位...'
        }
      ]
    };
  },
  computed: {
    // 根据筛选条件过滤通知
    filteredNotifications() {
      if (this.activeFilter === 'all') {
        return this.notifications;
      } else if (this.activeFilter === 'new') {
        return this.notifications.filter(item => item.type === 'view');
      } else if (this.activeFilter === 'chat') {
        return this.notifications.filter(item => item.type === 'chat');
      }
      return [];
    }
  },
  methods: {
    // 切换筛选条件
    changeFilter(filter) {
      this.activeFilter = filter;
    },
    // 处理通知点击事件
    handleNotificationClick(item) {
      if (item.type === 'system') {
        // 跳转到所有通知页面
        uni.navigateTo({
          url: '/pages/enterprise/personal-center/system-notifications'
        });
      } else if (item.type === 'chat') {
        // 跳转到聊天界面
        uni.navigateTo({
          // url: '/pages/chat/index'
        });
      }
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #fff;
}

.filter-bar {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.filter-item {
  font-size: 16px;
  color: #333;
  padding: 10px;
  cursor: pointer;
}

.filter-item.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}

.notification-list {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
}

.notification-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.notification-title {
  font-size: 16px;
  font-weight: bold;
}

.notification-time {
  font-size: 14px;
  color: #999;
}

.notification-content {
  font-size: 14px;
  color: #666;
}
</style>